<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Material Admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="assets/css/style.default.css" id="theme-stylesheet">
  </head>
  <body>
  <form action="registting" method="post">
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎注册</h1>
                  </div>
                  <p>注册登录界面模板</p>
                </div>
              </div>
            </div>
              <!-- Form Panel    -->
              <div class="col-lg-6 bg-white">
                <div class="form d-flex align-items-center">
                  <div class="content">
                      <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="cname" placeholder="请输入用户名/姓名" >
                      <div class="invalid-feedback">
                        用户名必须在2~10位之间
                      </div>
                      </div>
                      <div class="form-group">
                        <input id="register-caccount" class="input-material" type="text" name="caccount" placeholder="请输入用户名/姓名" >
                        <div id="dlm" class="invalid-feedback">
                          登录名不可用
                        </div>
                      </div>
                      <div class="form-group">
                        <input id="register-password" class="input-material" type="password" name="cpass" placeholder="请输入密码"   >
                          <div class="invalid-feedback">
                                              密码必须在6~10位之间
                                        </div>
                      </div>
                      <div class="form-group">
                        <input id="register-passwords" class="input-material" type="password" name="cpasss" placeholder="确认密码"   >
                          <div class="invalid-feedback">
                                              两次密码必须相同 且在6~10位之间
                                        </div>
                      </div>
                      <div class="form-group">
                        <button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button>
                      </div>
                    <small>已有账号?</small><a href="jump" class="signup">&nbsp;登录</a>
                  </div>
                </div>
              </div>

          </div>
        </div>
      </div>
    </div>
  </form>
    <!-- JavaScript files-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
    	$(function(){
    		/*错误class  form-control is-invalid
    		正确class  form-control is-valid*/
    		var flagName=false;
    		var flagPas=false;
    		var flagPass=false;
    		var flageAccount=false;
    		/*验证用户名*/
    		var name,passWord,passWords,account;
    		$("#register-username").change(function(){
    			name=$("#register-username").val();
    			if(name.length<2||name.length>10){
    				$("#register-username").removeClass("form-control is-valid")
    				$("#register-username").addClass("form-control is-invalid");
    				flagName=false;
    			}else{
    				$("#register-username").removeClass("form-control is-invalid")
    				$("#register-username").addClass("form-control is-valid");
    				flagName=true;
    			}
    		})
            $("#register-caccount").change(function(){
              name=$("#register-caccount").val().trim();
              if(name.length<2||name.length>10){
                $("#dlm").html("登录名不可用")
                $("#register-caccount").removeClass("form-control is-valid")
                $("#register-caccount").addClass("form-control is-invalid");
                flageAccount=false;
              }else{
                $.ajax({
                  type: "post",
                  url: "soleNameing",
                  data: {"caccount": name},
                  success: function (result) {
                    if (result.msg == "000") {
                      $("#dlm").html("登录名可用")
                      $("#register-caccount").removeClass("form-control is-invalid")
                      $("#register-caccount").addClass("form-control is-valid");
                      flageAccount=true;
                    } else {
                      $("#dlm").html("登录名不可用")
                      $("#register-caccount").removeClass("form-control is-valid")
                      $("#register-caccount").addClass("form-control is-invalid");
                      flageAccount=false;
                    }
                  },
                  dataType: "json"
                })
              }
            })
    		/*验证密码*/
    		$("#register-password").change(function(){
    			passWord=$("#register-password").val();
    			if(passWord.length<6||passWord.length>18){
    				$("#register-password").removeClass("form-control is-valid")
    				$("#register-password").addClass("form-control is-invalid");
    				flagPas=false;
    			}else{
    				$("#register-password").removeClass("form-control is-invalid")
    				$("#register-password").addClass("form-control is-valid");
    				flagPas=true;
    			}
    		})
    		/*验证确认密码*/
    		$("#register-passwords").change(function(){
    			passWords=$("#register-passwords").val();
    			if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
    				$("#register-passwords").removeClass("form-control is-valid")
    				$("#register-passwords").addClass("form-control is-invalid");
    				flagPass=false;
    			}else{
    				$("#register-passwords").removeClass("form-control is-invalid")
    				$("#register-passwords").addClass("form-control is-valid");
    				flagPass=true;
    			}
    		})
    		

    		$("#regbtn").click(function(){
    			if(flagName&&flagPas&&flagPass&&flageAccount){
    			  $("form").submit()
    			}else{
    				if(!flagName){
    					$("#register-username").addClass("form-control is-invalid");
    				}
    				if(!flagPas){
    					$("#register-password").addClass("form-control is-invalid");
    				}
    				if(!flagPass){
    					$("#register-passwords").addClass("form-control is-invalid");
    				}
    				if(!flageAccount){
    					$("#register-caccount").addClass("form-control is-invalid");
    				}
    			}
    		})
    	})
    </script>
  </body>
</html>